<template>
    <div class="list">
        <!-- 头部功能栏 -->
        <header>
            <div>
                <Button type="info" @click="addmodal">
                    <i class = "iconfont icon-add icon"></i>
                </Button>
            </div>
            <div class="box">
                <Input
                    v-model.trim="params.uId"
                    placeholder="请输入公众号名称查询"
                    clearable
                />
            </div>
            <div>
                <Button type="primary" icon="ios-search" @click="search"></Button>
            </div>
        </header>
        <!-- 列表 -->
        <div class="table">
            <Table size="small" :columns="columns1" :data="data1" stripe></Table>
        </div>
        <div class="page">
            <Page :total="count" :current='pageNo' :page-size="pageSize" show-total show-elevator @on-change="loadPage"/>
        </div>
        <Modal
            v-model="modalStatus"
            :title="modalTitle"
            :mask-closable='false'
            footer-hide
            width='500'>
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="120">
                <FormItem label="系统名称：" prop="nick">
                    <Input v-model="formValidate.nick" placeholder="请输入系统名称" class="inputbox" maxlength="50"></Input>
                </FormItem>
                <FormItem label="Appid：" prop="appid">
                    <Input v-model="formValidate.appid" placeholder="请输入Appid" class="inputbox" maxlength="100"></Input>
                </FormItem>
                <FormItem label="密钥：" prop="appsecret">
                    <Input v-model="formValidate.appsecret" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入密钥" class="inputbox" maxlength="100"></Input>
                </FormItem>
                <FormItem label="公众号原始ID：" prop="name">
                    <Input v-model="formValidate.name" placeholder="请输入公众号原始ID" class="inputbox" maxlength="100"></Input>
                </FormItem>
                <FormItem class="buttonbox">
                    <Button type="primary" @click="handleSubmit('formValidate')" :disabled='disabledSave' class="btn">
                        <Icon type="ios-checkmark" class="icon" />保存
                    </Button>
                    <Button @click="handleReset('formValidate')" class="btn">
                        <i class = "iconfont icon-butongyi icon" ></i>取消
                    </Button>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>
<script>
import api from "@/api/commonApi";
import aesUtils from "@/plugins/aes-utils.js";
import store from "@/store";
export default {
    data() {
        return {
            params: {
                uId: ""
            },
            pageNo: 1,
            pageSize: 10,
            count: 0,
            columns1: [
                { title: "排序", key: "sum", align: "center", width: 100,
                    render: (h, params) => {
                        let sum = (this.pageNo-1)*this.pageSize + params.index +1;
                        return h("span", sum);
                    }
                },
                { title: "公众号", key: "nick", align: "center"},
                { title: "Appid", key: "appid", align: "center", },
                { title: "密钥", key: "appsecret", align: "center",},
                {
                    title: "设置",
                    key: "iOperate",
                    align: "center",
                    width: 120,
                    render: (h, params) => {
                        let id = params.row.appid;
                        let nick = params.row.nick;
                        return [
                            h('span', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    color: '#5362e1',
                                    margin: "0px 6px"
                                },
                                on: {
                                    click: () => {
                                        this.disabledSave = false
                                        this.modalStatus = true;
                                        this.modalTitle = '修改公众号信息'
                                        this.$axios.post(api.findWxappById,{id:params.row.id}).then(res => {
                                            if (res.data.code === 1) {
                                                let formdata = res.data.object
                                                this.formValidate = {
                                                    id: formdata.id,
                                                    nick: formdata.nick,
                                                    appid: formdata.appid,
                                                    appsecret: formdata.appsecret,
                                                    name: formdata.name,
                                                    type: 9,
                                                }
                                            } else {
                                                this.$Message.error(res.data.message);
                                                return false;
                                            }
                                        }).catch(() => {
                                            this.modalStatus = false;
                                        });
                                        }
                                    },
                            }, '修改'),
                            '|',
                            h(
                                "span",
                                {
                                    attrs: {
                                        href: "javascript:void(0);"
                                    },
                                    style: {
                                        color: '#21c780',
                                        margin: "0px 6px"
                                    },
                                    on: {
                                        click: () => {
                                            // FunctionJS方法
                                            this.functionJS.paramsNavgationTo(
                                                this,"wxbannerList",
                                            );
                                            let iv = store.state.iv;
                                            let salt = store.state.salt;
                                            localStorage.setItem("nick",params.row.nick)
                                            localStorage.setItem("id",params.row.id)
                                            localStorage.setItem(
                                                "appid",
                                                aesUtils.encrypt(
                                                    salt,
                                                    iv,
                                                    "wxAppid",
                                                    id
                                                )
                                            );
                                        }
                                    }
                                },
                                "设置"
                            )
                        ];
                    }
                }
            ],
            data1: [],
            modalStatus: false,
            formValidate: {
                nick: "",
                appid: "",
                appsecret: "",
                name: "",
                id: '',
            },
            ruleValidate:{
                nick: [{ required: true, message: '请输入系统名称', trigger: 'blur' }],
                appid:[{ required: true, message: '请输入Appid', trigger: 'blur' }],
                appsecret:[{ required: true, message: '请输入密钥', trigger: 'blur' }],
                name:[{ required: true, message: '请输入公众号原始ID', trigger: 'blur' }],
            },
            disabledSave: false
        };
    },
    created() {
        let breadList = [
            { path: "/index", title: "首页" },
            {
                path: "/index/publicOperation/publicAddress/home",
                title: "公众号托管"
            },
            {
                path: "/index/publicOperation/publicAddress/home",
                title: "公众号运营"
            }
        ];
        this.$emit("changeBreadList", breadList);
    },
    mounted() {
        this.loadingData(1);
    },
    methods: {
        //添加按钮
        addmodal(){
            this.modalStatus = true;
            this.modalTitle = '添加系统信息'
            this.formValidate.nick = ''
            this.formValidate.appid = ''
            this.formValidate.appsecret = ''
            this.formValidate.name = ''
            this.formValidate.id = ''
        },
         // 保存按钮
        handleSubmit(name){
            this.disabledSave = true
            this.$refs[name].validate((valid) => {
                if (valid) {
                    let body = {
                        nick: this.formValidate.nick,
                        appid: this.formValidate.appid,
                        appsecret: this.formValidate.appsecret,
                        name: this.formValidate.name,
                        type: 9,
                        alias: '',
                        headurl: '',
                        qrcodeurl: '',
                        func: '',
                        status: '',
                        authorizerRefreshToken: ' ',
                        authorizerAccessToken: ' ',
                        authorizerAccessTokenTime: '0',
                        jsapi: ' ',
                        jsapitime: '0',
                        template: ' ',
                    }
                    if(this.modalTitle == '添加公众号'){
                        body.id = ''
                    } else {
                        body.id = this.formValidate.id
                    }
                    this.$axios.post(api.saveWxapp,body).then(res => {
                        if(res.data.code == 1) {
                            this.handleReset('formValidate')
                            this.$Message.success('保存成功')
                            this.loadingData(1)
                            setTimeout(() => {
                                this.disabledSave = false
                            }, 1000);
                        } else {
                            this.$Message.error(res.data.message)
                            this.disabledSave = false
                        }
                    }).catch(() => {
                        this.disabledSave = false
                    });
                } else {
                    this.$Message.error('请完整填写必填项!');
                    this.disabledSave = false
                }
            })
        },
        //取消新增
        handleReset (name) {
            this.modalStatus = false;
            this.disabledSave = false
            this.$refs[name].resetFields();
            this.formValidate.nick = ''
            this.formValidate.appid = ''
            this.formValidate.appsecret = ''
            this.formValidate.name = ''
        },
        loadPage(index) {
            this.pageNo = index;
            this.loadingData(index);
        },
        search() {
            this.pageNo = 1
            this.loadingData(1, this.params.uId);
        },
        loadingData(pageNo, val) {
            let params = {
                pageNo,
                pageSize: this.pageSize
            };
            if (Boolean(val)) {
                params.searchKey = val.trim();
            }
            this.$axios.post(api.findWxappList, params).then(res => {
                if (res.data.code) {
                    let ret = res.data.object.records;
                    if(ret){
                        ret.forEach((item, index) => {
                            item.sum = index + 1;
                        });
                        this.count = res.data.object.total;
                        this.data1 = ret;
                    } else {
                        this.data1 = []
                    }
                } else {
                    this.$Message.info("没有访问权限");
                }
            });
        }
    }
};
</script>
<style lang="less" scoped>
.list {
    width: 100%;
    padding: 10px;
    margin: 0 auto;
    background: #fff;
    header {
        width: 100%;
        display: flex;
        margin: 10px 0;
        .box{
            margin: 0 10px;
            width: 200px;
        }
    }
    .page{
        text-align: center;
        margin: 20px 0;
    }
}
.inputbox{
   width:300px;
}
.buttonbox{
    width: 350px;
    text-align: center;
}
.icon{
    margin-right: 5px;
    font-size: 14px;
}
.btn{
    margin-left: 10px;
    width: 75px;
    height: 35px;
}
/deep/ .ivu-modal-wrap {
    .ivu-modal{
        float:right !important;
        background-color: #fff;
        border-radius: 10px;
        top: 0px;
        height: 100%;
    }
}
</style>
